<template>
  <teleport to="body">
    <!-- 弹窗 -->
    <div class="login_con" v-show="props.isShow">
      <div :class="popClassArr">
        <div class="exit">
          <input class="exit_btn" type="button" value="×" @click="exit"/>
        </div>
        <div class="box_con" v-if="operate ==='log'">
          <div class="input_box">
            <img src="../assets/image/user.png" alt=""/>
            <input type="text" placeholder="请输入账号" v-model="input.uname"/>
          </div>
          <div class="input_box box_mar">
            <img src="../assets/image/密码.png" alt=""/>
            <input type="password" placeholder="请输入密码" v-model="input.pwd"/>
          </div>
        </div>
        <div class="box_con" v-else-if="operate ==='reg'">
          <div class="input_box">
            <img src="../assets/image/user.png" alt=""/>
            <input type="text" placeholder="请输入账号" class="reg_input" v-model="input.uname" @blur="checkUname"/>
            <img :src="regCheck[0].src" class="check_img" v-show="isShow[0]" alt=""/>
          </div>
          <div class="input_box box_mar">
            <img src="../assets/image/密码.png" alt=""/>
            <input type="password" placeholder="请输入密码" class="reg_input" v-model="input.pwd" @blur="checkPwd"/>
            <img :src="regCheck[1].src" class="check_img" v-show="isShow[1]" alt=""/>
          </div>
          <div class="input_box box_mar">
            <img src="../assets/image/确认密码.png" alt=""/>
            <input type="password" placeholder="再次输入密码" class="reg_input" v-model="input.dbPwd"
                   @blur="checkDbPwd"/>
            <img :src="regCheck[2].src" class="check_img" v-show="isShow[2]" alt=""/>
          </div>
        </div>
        <div class="box_bottom">
          <input type="button" value="登录" :class="logBtnClassArr" @click="goLog(input.uname,input.pwd)"/>
          <input type="button" value="注册" :class="regBtnClassArr" @click="goReg(input.uname,input.pwd)"/>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script setup>
import {defineProps, ref, defineEmits, watch, reactive} from 'vue'
import axios from "axios";
import emitter from '@/utils/event-bus.js'

axios.defaults.baseURL = "http://localhost:8080";

// 变量
let popClassArr = reactive(['login_box'])

let operate = ref('log')

let regCheck;

let logBtnClassArr;

let regBtnClassArr;

let input = reactive({
  uname: '',
  pwd: '',
  dbPwd: '',
})

let isShow = reactive([false, false, false])

//常量
const error = require('@/assets/image/关闭实心.png')
const correct = require('@/assets/image/正确实心.png')

const props = defineProps({
  isShow: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['exit'])

// 方法
let checkUname = () => {
  const username = /^[a-zA-Z][a-zA-Z0-9]{5,}$/
  if (!username.test(input.uname)) {
    regCheck[0].src = error
    regCheck[0].isChecked = false
    alertMsg("账号必须以字母开头,不能少于6位")
    // this.msg = "账号必须以字母开头,不能少于6位"
  } else {
    axios.get("http://localhost:8080/api/user/" + input.uname)
        .then(resp => {
          if (resp.data !== '') {
            alertMsg(resp.data)
            // this.msg = resp.data
            regCheck[0].src = error
            regCheck[0].isChecked = false
            alertMsg(resp.data)
          } else {
            regCheck[0].src = correct
            regCheck[0].isChecked = true
          }
        }).catch(err => console.log(err));
  }
  isShow[0] = true
}

let checkPwd = () => {
  const password = /^[a-zA-Z][a-zA-Z0-9]{7,}$/
  if (!password.test(input.pwd)) {
    regCheck[1].src = error
    regCheck[1].isChecked = false
    alertMsg("密码必须以字母开头,不能少于8位")
    // this.msg = "密码必须以字母开头,不能少于8位"
    // console.log(111)
  } else {
    regCheck[1].src = correct
    regCheck[1].isChecked = true
    // console.log(222)
  }
  isShow[1] = true
}

let checkDbPwd = () => {
  if (input.pwd !== input.dbPwd || input.dbPwd === "") {
    regCheck[2].src = error
    regCheck[2].isChecked = false
    alertMsg("两次输入的密码不同")
    // this.msg = "两次输入的密码不同"
    // console.log(111)
  } else {
    regCheck[2].src = correct
    regCheck[2].isChecked = true
    // console.log(222)
  }
  isShow[2] = true
}

let goLog = (username, password) => {

  if (operate.value === 'log') {
    if (username !== null && password !== null) {
      // console.log('登录')
      axios.get("/api/user/login", {
        params: {
          username: username,
          password: password
        }
      }).then(resp => {
        if (resp.data !== '') {
          emitter.emit('login', resp.data)
          alertMsg('登陆成功')
          exit()
          // localStorage.setItem('user', JSON.stringify(this.user))
        } else {
          alertMsg('账号或密码错误')
        }
      }).catch(err => console.log(err));
    } else {
      alertMsg('账号或密码不能为空')
    }
  } else {
    operate.value = 'log'
  }
}

let goReg = (username, password) => {

  if (operate.value === 'reg') {
    let b = true
    regCheck.forEach(item => {
      if (!item.isChecked) {
        b = false
      }
    })
    if (b) {
      axios({
            url: '/api/user',
            method: 'POST',
            params: {
              username: username,
              password: password
            }
          }
      ).then(resp => {
        alertMsg(resp.data)
        // this.popStyle = {}
        operate.value = 'log'
        input.uname = username
      }).catch(err => console.log(err));
    }
  } else {
    operate.value = 'reg'
  }
}

let alertMsg = (value) => {
  emitter.emit('alert', value)
}

let exit = () => {
  emits('exit')
}

//监听
watch(operate, (value) => {
  if (value !== '') {
    switch (value) {
      case 'reg' :
        input.dbPwd = ''
        isShow[0] = false
        isShow[1] = false
        isShow[2] = false
        regCheck = reactive([
          {
            src: error,
            isChecked: false
          },
          {
            src: error,
            isChecked: false
          },
          {
            src: error,
            isChecked: false
          }
        ])
        popClassArr = ['login_box', 'reg_box']
        logBtnClassArr = ['box_btn']
        regBtnClassArr = ['box_btn right_btn', 'btn_clr']
        break
      default :
        operate.value = 'log'
        popClassArr = ['login_box']
        logBtnClassArr = ['box_btn', 'btn_clr']
        regBtnClassArr = ['box_btn right_btn']
    }
    input.uname = ''
    input.pwd = ''
  } else {
    exit()
  }
}, {
  //监视的配置
  immediate: true //一上来就更新
});
</script>

<style scoped>
/*弹窗*/
.login_con {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /*display: none;*/
}

.login_con .login_box {
  margin: 10% auto;
  width: 450px;
  height: 350px;
  border: 1px solid #b3b3b3;
  background: white;
  border-radius: 10px;
}

.login_con .reg_box {
  margin: 8% auto;
  /*width: 450px;*/
  height: 450px;
  /*border: 1px solid #b3b3b3;*/
  /*background: white;*/
  /*border-radius: 10px;*/
}

.login_con .exit {
  height: 40px;
  width: 100%;
}

.login_con .exit .exit_btn {
  height: 30px;
  width: 30px;
  background: #e02d40;
  color: white;
  float: right;
  font-size: 20px;
  margin-right: 10px;
  border: none;
  border-radius: 5px;
  margin-top: 2%;
}

.login_con .box_con {
  margin-top: 10%;
  width: 100%;
}

.login_con .box_con .input_box {
  margin: 0 auto;
  width: 350px;
  height: 50px;
  border-radius: 15px;
  border: 3px solid #dfd6bf;
}

.login_con .box_con .box_mar {
  margin-top: 30px;
}

.login_con .box_con .input_box img {
  height: 30px;
  width: 30px;
  margin-top: 8px;
  margin-left: 10px;
  float: left;
}

.login_con .box_con .input_box input {
  border: none;
  margin-top: 5px;
  margin-left: 10px;
  height: 40px;
  font-size: 15px;
  width: 280px;
}

.login_con .box_con .input_box .reg_input {
  width: 255px;
}

.login_con .box_con .input_box .check_img {
  height: 20px;
  width: 20px;
  margin-right: 10px;
  margin-top: 14px;
  float: right;
}

.login_con .box_bottom {
  width: 280px;
  margin: 30px auto;
}

.login_con .box_bottom .box_btn {
  height: 50px;
  width: 100px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 25px;
  border: 3px solid #dfd6bf;
  background: white;
  float: left;
}

.login_con .box_bottom .right_btn {
  float: right;
}

.login_con .box_bottom .btn_clr {
  background: #dfd6bf;
}
</style>